<template>
	<view>
		<view v-on:click="onClick">当前标题：{{title}}</view>
		<button v-on:click="cickNunm">数值:{{num}}</button>
		
		<view class="box" :style="{background:bgColor}" @click="clickBg"></view>
		
		<view class="nav">
			<view class="item" :class="navindex==index ? 'active' : ''" v-for="(item,index) in navArr" :key="item.id" @click="clickNav(index)">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"动态绑定",
				num:1,
				bgColor:"yellow",
				navArr:[
					{id:1,title:"首页"},
					{id:2,title:"介绍"},
					{id:3,title:"教程"},
					{id:4,title:"组件"}
				],
				navindex:0
			};
		},
		methods:{
			onClick:function(){
				this.title="uniapp课程"
			},
			cickNunm(){
				this.num++
			},
			clickBg(){
				let color="#"+String(Math.random()).substr(3,6);
				this.bgColor=color
			},
			clickNav(e){
				this.navindex=e
			}
		}
	}
</script>

<style lang="scss">
	.box{
		width: 200rpx;
		height: 200rpx;
		background: pink;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.item{
			flex:1;
			line-height:60rpx;
			text-align: center;
			background-color: #ccc;
			&.active{
				background-color: #1a9b34;
				color: #fff;
			}
		}
	}
</style>
